<%--
  Created by IntelliJ IDEA.
  User: 41813
  Date: 2019/3/1
  Time: 17:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>测试</title>
    <script typet="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
    <script>
            $(document).ready(function () {
                $("#TJ").click(function () {
                    var songId = 3;
                    var playlistId =2;
                    //alert(songId)
                    //alert(playlistId)
                    $.ajax({
                        "url"     :"<%=request.getContextPath()%>/textServlet",
                        "data"    :{'songId':songId,'playlistId':playlistId},
                        "type"    :"GET",
                        "dataType":"json",
                        "success" :function (result)  {
                            //alert(result)
                            if(result.data=="yes"){
                                alert("添加成功！！！")
                            }else{
                                alert("该歌曲已经存在！！！")
                            }
                        }
                    })
                })
            });
            
            
            $(document).ready(function () {
                var $fromArea = $("p");
                var $pInput = $fromArea.find(":input");
                var $pComment =$("#comment");

                $("#commentSubmit").click(function () {
                    //加工成json对象方
                    var paramArray = $pInput.serializeArray();
                    //console.log(paramArray);
                    //把json转化成字符串
                    var queryString = $.param(paramArray);
                    //console.log(queryString);
                    $.ajax({
                        "url"     : "<%=request.getContextPath()%>/textServlet1",
                        "type"    : "post",
                        "data"    : queryString,
                        "dataType": "JSON",
                        "success" : function (data) {
                            /*alert(data[2].result);
                            alert(data[2].createdate)
                            alert(data[0].cauthor)
                            alert(data[1].comment)*/
                            if(data[2].result==0){
                                /*var $newComment = $("<p>留言人：cauthor</p>\n" +
                                    "       <p>评论时间：createdate</p>\n" +
                                    "       <p>点赞数：Cid</p>\n" +
                                    "       <p>评论内容：comment</p>");
                              $(paramArray).each(function () {
                                  $newComment.find("p:contains('"+this.name+"')").text(this.value);
                              })
                                $newComment.find("p:contains('createdate')").text(data[0].createdate);
                                $pComment.prepend($newComment);*/
                                $("#i").append(data[2].result);
                                $("#j").append(data[2].createdate);
                                $("#k").append(data[0].cauthor);
                                $("#l").append(data[1].comment);
                            }else{
                                alert("网络延迟，请稍后再试！！！")
                            }
                        }
                    })
                })
            })
    </script>
<body>

    <input type="submit" name="tianjia" id="TJ" value="添加">

    <p><input type="text" name="Cid" id="Cid" value="1"></p>
    <p><input type="text" name="cauthor" id="cauthor" value="这家伙很懒什么都没有留下"></p>
    <p><textarea name="comment" id="comment" cols="70" rows="10"></textarea></p>
    <p><input type="button" name="submit" value="发表" id="commentSubmit"></p>


    <p id="i">评论结果（1成功，0失败）：</p>
    <p id="j">评论时间：</p>
    <p id="k">用户名：</p>
    <p id="l">评论内容：</p>

    <%--<p>留言人：cauthor</p>
    <p>评论时间：createdate</p>
    <p>点赞数：Cid</p>
    <p>评论内容：comment</p>--%>

</body>
</html>
